<style>
    span.kong {
        display: inline-block;
    }
    
    .menu-open {
        color: #666;
        display: inline-block;
        font-size: 14px;
        margin-right: 6px;
    }
    
    .menu-open .layui-icon-down {
        display: none;
    }
    
    .menu-open.open .layui-icon-right {
        display: none;
    }
    
    .menu-open.open .layui-icon-down {
        display: inline-block;
    }
    
    .menu-open i {
        font-size: 14px;
    }
    
    .level-child {
        display: none;
    }
    
    .layui-table td {
        padding: 5px 15px;
    }
</style>
<div class="layui-clear" style="padding:0px 20px 90px 20px;">
    <form class="layui-form close-dialog parent-refresh" action="/permission/api_admin/save_permission" method="post">
        <table class="layui-table" lay-skin="row" style="border:0;">
            <?php
                function output_tr($tree = [],$index = 0,$check_menus){
                    $html = '';
                    $types = C('PERMISSION_TYPES');
                    foreach($tree as $item){
                        $html_tr  = '<tr class="menu-tr tr-id-'.$item['id'].' level-'.$index.' '.($index == 0 ? '' : 'level-child').' parent-id-'.$item['parentid'].'" data-level="'.$index.'" data-id="'.$item['id'].'">';
                        $html_tr .= '<td style="border:0;"><span class="kong" style="width:'.(30*$index).'px"></span>';
                        $html_tr .= return_arrow($item);
                        $checked = in_array($item['id'], $check_menus) ? 'checked' : '';
                        $html_tr .= '<input type="checkbox" name="menu_ids[]" value="'.$item['id'].'" title="'.$item['title'].'" '.$checked.' lay-skin="primary">';
                        $html_tr .= '</tr>';
                        $html .= $html_tr; 
                        if($item['children']){
                            $html .= output_tr($item['children'],$index+1,$check_menus);
                        }
                    }
                    return $html;
                }

                function return_arrow($item){
                    return $item['children'] ? '<a href="javascript:;" class="menu-open"><i class="layui-icon layui-icon-right"></i><i class="layui-icon layui-icon-down"></i></a>' : '';
                }
            ?>
                <tbody id="menu-box">
                    <php>echo output_tr($treedata,0,$check_menus);</php>
                </tbody>
        </table>
        <div class="xy-bottom" style="bottom:20px;position: fixed;">
            <input type="hidden" name="role_id" value="{$_GET['id']}">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
        </div>
    </form>

</div>
<js href="/Public/store.everything.min.js" />
<script>
    // store.set('user', { name:'Marcus' })
    // store.get('user')
    // store.remove('user')
    // store.clearAll()
    // store.each(function(value, key) {
    //     console.log(key, '==', value)
    // })
    layui.use(['jquery'], function() {
        var $ = layui.jquery;
        load_menu_status();
        $('#menu-btn').click(function() {
            if ($(this).attr('data-type') == 'close') {
                $(this).attr('data-type', 'open');
                $('.menu-open').addClass('open');
                $('.level-child').show();
            } else {
                $('#menu-btn').attr('data-type', 'close');
                $('.menu-open').removeClass('open');
                $('.level-child').hide();
            }
            save_menu_status();
        });

        $('.menu-open').click(function() {
            var $tr = $(this).parent('td').parent('.menu-tr');
            var id = $tr.data('id');
            var level = $tr.data('level');
            // console.log(parent_id);
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                hide_tr($tr, level); //递归隐藏行
            } else {
                $(this).addClass('open');
                $('.parent-id-' + id).show();
            }
            save_menu_status();
        });
        //递归隐藏表格行
        function hide_tr($tr, start_level = 0) {
            var $next_tr = $tr.next('.menu-tr');
            var level_next = $next_tr.data('level');
            if (start_level != level_next) {
                $next_tr.hide();
                $next_tr.find('.menu-open').removeClass('open');
                hide_tr($next_tr, start_level);
            }
        }

        //存储菜单现在的打开状态
        function save_menu_status() {
            var data = [];
            $('#menu-box tr').each(function() {
                var id = $(this).data('id');
                var check = $(this).is(":hidden") ? 0 : 1;
                var hasopen = $(this).find('.menu-open').hasClass('open') ? 1 : 0;
                data[data.length] = [id, check, hasopen];
            });
            store.set('permission_menu_open_status', data);
        }

        //加载菜单之前的状态
        function load_menu_status() {
            var status = store.get('permission_menu_open_status');
            if (typeof(status) == 'undefined') {
                status = [];
            }
            for (var i = 0; i < status.length; i++) {
                var item = status[i];
                if (item[1]) {
                    if (item[2]) {
                        $('.tr-id-' + item[0]).find('.menu-open').addClass('open');
                    }
                    $('.tr-id-' + item[0]).show();
                }
            }
            // console.log(status); 
        }
    });
</script>